<template>
    <div class="camera-info">

        <div class="top">
            <div >
                <Button @click="addModal" type="primary" >新增摄像头</Button>
            </div>
        </div>
        <div class="content">
            <Table :columns="columns7" :data="cameraData" style="width: 100%;">
                <template slot-scope="{ row, index }" slot="view">
                    <Button type="success" size="small" shape="circle" icon="ios-play" @click="viewCamera(row)"></Button>
                </template>
            </Table>
            <Page transfer :total="cameraTotal" :page-size="cameraPageSize" size="small"
                @on-change="cameraPageChange" show-elevator show-total style="margin: 10px;"/>
        </div>
        <div>
            <Modal v-model="editModal" :title="modalTitle" width="600" style="z-index:9999" ok-text="保存" @on-ok="save" @on-cancel="cancel">
                <Form ref="form" v-model="cameraForm" :label-width="labelWidth">
                    <FormItem label="序号:">
                        <Input disabled v-model="cameraForm.showid" size="small" style="width:400px"></Input>
                    </FormItem>
                    <FormItem label="摄像头名称:">
                        <Input v-model="cameraForm.name" size="small" style="width:400px"></Input>
                    </FormItem>
                    <FormItem label="位置:">
                        <Input v-model="cameraForm.location" size="small" style="width:400px"></Input>
                    </FormItem>
                    <FormItem label="摄像头IP:">
                        <Input v-model="cameraForm.ip" size="small" style="width:400px"></Input>
                    </FormItem>
                    <FormItem label="视频流地址:">
                        <Input v-model="cameraForm.url" size="small" style="width:400px"></Input>
                    </FormItem>
                </Form>
            </Modal>
        </div>
        <Modal title="监控预览" v-model="ViewModal" width="800" :closable="false" :mask-closable="false" >
            <div id="cameraView" style="height: 500px;">
                <!-- <video class="video-js vjs-default-skin" :controls="true" style="width: 100%;height: 100%;" id="viewCamera"></video> -->
            </div>
            <div slot="footer">
                <Button type="primary" @click="stopView">退出</Button>
            </div>
        </Modal>
    </div>
</template>
<script>
import CameraInfoVue from './CameraInfo.vue';
import CameraListVue from './Video.vue';
import util from "../../api/util.js";
import videojs from 'video.js';
export default {
    components: {
    },
    data() {
        return {
            ViewModal:false,
            editModal: false,
            player:null,
            modalTitle: "编辑摄像头信息",
            labelWidth: 100,
            columns7: [
                {
                    title: '序号',
                    key: 'showid',
                    width: 65,
                    align: "center"
                },
                {
                    title: '摄像头名称',
                    key: 'name',
                    align: "center"
                },
                {
                    title: '位置',
                    key: 'location',
                    align: "center"
                },
                {
                    title: '摄像头IP',
                    key: 'ip',
                    align: "center"
                },
                {
                    title: '视频流地址',
                    key: 'url',
                    align: "center"
                },
                {
                    title: '在线预览',
                    key: 'view',
                    align: "center",
                    slot:"view"
                },
                {
                    title: '操作',
                    key: 'action',
                    width: 150,
                    align: 'center',
                    render: (h, params) => {
                        return h('div', [
                            h('Button', {
                                props: {
                                    type: 'primary',
                                    size: 'small'
                                },
                                style: {
                                    marginRight: '5px'
                                },
                                on: {
                                    click: () => {
                                        this.status = "editCamera";
                                        this.editModal = true;
                                        this.cameraForm.id = params.row.id;
                                        this.cameraForm.showid = params.row.showid;
                                        this.cameraForm.name = params.row.name;
                                        this.cameraForm.location = params.row.location;
                                        this.cameraForm.ip = params.row.ip;
                                        this.cameraForm.url = params.row.url;
                                    }
                                }
                            }, '编辑'),
                            h('Button', {
                                props: {
                                    type: 'error',
                                    size: 'small'
                                },
                                on: {
                                    click: () => {
                                        this.removeCamera(params.row)
                                    }
                                }
                            }, '删除')
                        ]);
                    }
                }
            ],
            cameraData: [],
            cameraTotal: 0,
            cameraPageSize: 10,
            cameraCurrentPage: 1,
            cameraForm: {
                id: "",
                name: "",
                location: "",
                ip: "",
                url: "",
            },
        };
    },
    computed: {
    },
    methods: {
        addModal(){
            this.status = "addCamera";
            this.modalTitle = "新增摄像头信息";
            this.editModal = true;
            this.cameraForm.id = "";
            this.cameraForm.name = "";
            this.cameraForm.location = "";
            this.cameraForm.ip = "";
            this.cameraForm.url = "";
        },
        save() {
            let self = this;
            let params = {
                status: self.status,
                camera: self.cameraForm
            };
            util.post(self, "camera/" + self.status, params, function (res) {
                console.log(res.data);
                if (res.data.data) {
                    self.$Notice.success({ title: res.data.data });
                    self.getCameraData(self.cameraPageSize, self.cameraCurrentPage)
                    self.cameraForm = {
                        id: "",
                        name: "",
                        location: "",
                        ip: "",
                        url: "",
                    }
                }
            })
        },
        cancel(){
            let self = this;
            self.cameraForm = {
                id: "",
                name: "",
                location: "",
                ip: "",
                url: "",
            }
            self.editModal = false;
        },
        getCameraData(pageSize, currentPage) {
            let self = this;
            let param = {
                action: "getCameraData",
                pageSize: pageSize,
                currentPage: currentPage
            }

            util.post(self, "camera/getCameraData", param, function (res) {
                self.cameraData = res.data.data.data;
                self.cameraTotal = res.data.data.count;
            })
        },
        cameraPageChange(page){
            this.cameraCurrentPage = page;
            this.getCameraData(this.cameraPageSize, this.cameraCurrentPage)
        },
        removeCamera(row){
            console.log(row+"========")
            let self = this;
            let param = {
                action:"remove",
                camera:row
            };
            util.post(self, "camera/removeCamera", param, function(res){
                if(res.data.data == "ok"){
                    self.$Notice.success({title:"删除成功"});
                    self.getCameraData(self.cameraPageSize, self.cameraCurrentPage)
                    
                }
            })
        },
        viewCamera(row){
            let self = this;
            console.log(row.key);
            var dom = document.getElementById("cameraView");
            var video = document.createElement("video");
            video.id = "cameraViewPlayer" ;
            video.className = "video-js"
            video.style.width = "100%";
            video.style.height = "90%";
            video.controls = true;
            dom.appendChild(video);
            this.player = videojs("cameraViewPlayer", {
                autoplay:true,
                controlBar:{  //总控制条
                //这里可以自己控制各小组件的顺序和显示方式
                    children: [
                    {name: 'playToggle'}, // 播放按钮
                    {name: 'currentTimeDisplay'}, // 当前已播放时间
                    {name: 'progressControl'}, // 播放进度条
                    {name: 'durationDisplay'}, // 总时间
                    {name: 'audioTrackButton'},
                    { // 倍数播放
                        name: 'playbackRateMenuButton',
                        'playbackRates': [0.5, 1, 1.5, 2, 2.5]
                    },
                    {
                        name: 'volumePanel', // 音量控制
                        // inline: false, // 不使用水平方式
                    },
                    ],
                    PictureInPictureToggle:true,  //画中画
                    FullscreenToggle: true // 全屏
                }
            });
            this.player.src(`http://${row.zlurl}/hls.m3u8`);
            this.ViewModal = true;
        },
        stopView(){
            if(this.player){
                console.log(1111);
                this.player.pause(); 
                this.player.dispose();
            }
            this.player = null;
            this.ViewModal = false;
        }
    },
    mounted(){
        this.getCameraData(this.cameraPageSize, this.cameraCurrentPage)
    }
}
</script>

<style lang="less">
.camera-info{
    width: 98%;
    height: 97%;
    display: flex;
    flex-direction: column;
    .top{
        width: 100%;
        height: 5%;
        background-color: white;
    }
    .content{
        width: 100%;
        height: 90%;
        background-color: white;
        margin-top: 10px;
    }
}
</style>
